<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>教务管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            background: #f5f7fa;
        }

        /* 顶部四栏统计 */
        .top-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-box {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            text-align: center;
        }

        .stat-title {
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
        }

        .stat-content {
            color: #333;
            font-size: 18px;
            font-weight: 600;
        }

        /* 图片区域 */
        .image-section {
            text-align: center;
            margin-top: 40px;
        }

        .circle-image {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            margin-bottom: 20px;
        }

        .image-caption {
            font-size: 16px;
            color: #444;
            letter-spacing: 1px;
            margin-top: 15px;
        }

        /* 响应式处理 */
        @media (max-width: 768px) {
            .top-stats {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .top-stats {
                grid-template-columns: 1fr;
            }
        }
		.grid-section {
            padding: 30px 20px;
            background: #f8f9fa;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 25px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .grid-item {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 12px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            text-align: center;
            padding: 15px;
        }

        .grid-item:hover {
            transform: translateY(-5px);
        }

        .grid-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 12px;
        }

        .grid-text {
            font-size: 16px;
            color: #333;
            font-weight: 500;
            padding: 8px 0;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .grid-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部四个统计框 -->
    <div class="top-stats">
        <div class="stat-box">
         <img src="image/1.png" width="200" height="200" />
            <div class="stat-title">正在选课人数</div>
            <div class="stat-content">在线：xx/总：xx</div>
        </div>
        <div class="stat-box">
           <img src="image/2.png" width="200" height="200" />
<div class="stat-title">教师学生人数</div>
            <div class="stat-content">教师：xx/学生：xx</div>
        </div>
        <div class="stat-box">
          <img src="image/3.png" width="200" height="200" />
<div class="stat-title">周课时最高教师</div>
            <div class="stat-content">李老师</div>
        </div>
        <div class="stat-box">
    <img src="image/4.png" width="200" height="200" />
<div class="stat-title">班级类别</div>
            <div class="stat-content">本科：x/专科：x</div>
        </div>
    </div>

    <!-- 圆形图片区域 -->
    <div class="grid-section">
        <div class="grid-container">
            <!-- 第1行 -->
            <div class="grid-item">
           <img src="image/1-1.png" width="200" height="200" />
<div class="grid-text">学生管理</div>
            </div>
            <div class="grid-item">
             <img src="image/1-2.png" width="247" height="200" />
<div class="grid-text">教师管理</div>
            </div>
            <div class="grid-item">
               <img src="image/1-3.png" width="200" height="200" />
<div class="grid-text">班级管理</div>
            </div>
            <div class="grid-item">
              <img src="image/1-4.png" width="200" height="200" />
<div class="grid-text">组织部门</div>
            </div>

            <!-- 第2行 -->
            <div class="grid-item">
          <img src="image/1-5.png" width="200" height="200" />
<div class="grid-text">考场编排</div>
            </div>
            <div class="grid-item">
               <img src="image/1-6.png" width="200" height="200" />
<div class="grid-text">排课管理</div>
            </div>
            <div class="grid-item">
               <img src="image/1-7.png" width="200" height="200" />
<div class="grid-text">调课代表</div>
            </div>
            <div class="grid-item">
           <img src="image/1-8.png" width="200" height="200" />
<div class="grid-text">成绩公布</div>
            </div>

            <!-- 第3行 -->
            <div class="grid-item">
  <img src="image/1-9.png" width="200" height="200" />
<div class="grid-text">师生助手</div>
            </div>
            <div class="grid-item">
             <img src="image/1-10.png" width="200" height="200" />
<div class="grid-text">课时统计</div>
            </div>
            <div class="grid-item">
            <img src="image/1-11.png" width="200" height="200" />
<div class="grid-text">教师评价</div>
            </div>
            <div class="grid-item">
               <img src="image/1-12.png" width="200" height="200" />
<div class="grid-text">学校通告</div>
            </div>
        </div>
    </div>
</body>
</html>